<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>微电影</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resource/static/base/images/logo.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/bootstrap-movie.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/animate.css">
    <style>
        .navbar-brand > img {
            display: inline;
        }

    </style>
    <style>
        .media {
            padding: 3px;
            border: 1px solid #ccc
        }

    </style>
</head>

<body>
<!--导航-->
<!--小屏幕导航按钮和logo-->
<c:if test="${sessionScope.userName!=null}">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.jsp" class="navbar-brand" style="width:250px;">
                    <img src="${pageContext.request.contextPath}/resource/static/base/images/logo.png"
                         style="height:30px;">&nbsp;微电影
                </a>
            </div>
            <!--小屏幕导航按钮和logo-->
            <!--导航-->
            <div class="navbar-collapse collapse">
                <form class="navbar-form navbar-left" role="search" style="margin-top:18px;">
                    <div class="form-group input-group">
                        <input type="text" class="form-control" placeholder="请输入电影名！">
                        <span class="input-group-btn">
                        <a class="btn btn-default" href="search.jsp"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>
                    </span>
                    </div>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="curlink" href="index.jsp"><span class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
                    </li>
                    <li>
                        <a class="curlink" href="/person/toUserInformation"><span
                                class="glyphicon glyphicon-user"></span>&nbsp;${sessionScope.userName}</a>
                    </li>
                    <li>
                        <a class="curlink" href="/person/layout"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</c:if>
<!--导航-->

<!--导航-->
<!--内容-->
<div class="container" style="margin-top:120px">
    <c:choose>
        <c:when test="${sessionScope.userName==null}">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title"><span class="glyphicon glyphicon-log-in"></span>&nbsp;用户登录</h3>
                        </div>
                        <div class="panel-body">
                            <form role="form" id="loginForm">
                                <div class="form-group">
                                    <label for="input_contact"><span
                                            class="glyphicon glyphicon-user"></span>&nbsp;登录用户</label>
                                    <select id="selectrole">
                                        <option value="0">普通用户</option>
                                        <option value="2">VIP用户</option>
                                    </select>
                                </div>
                                <div class="col-md-12" ></div>
                                <div class="form-group">
                                    <label for="input_contact"><span
                                            class="glyphicon glyphicon-user"></span>&nbsp;账号</label>
                                    <input id="input_contact" class="form-control input-lg" placeholder="用户名/邮箱/手机号码"
                                           name="contact" type="text" autofocus>
                                </div>
                                <div class="col-md-12" id="error_contact"></div>
                                <div class="form-group">
                                    <label for="input_password"><span
                                            class="glyphicon glyphicon-lock"></span>&nbsp;密码</label>
                                    <input id="input_password" class="form-control input-lg" placeholder="密码"
                                           name="password" type="password" value="">
                                </div>
                                <div class="col-md-12" id="error_password"></div>
                                <div class="form-group">
                                    <div><a href="/person/toRegister">注册</a></div>
                                </div>
                                <div class="col-md-12" ></div>
                                <input type="submit" class="btn btn-lg btn-success btn-block" value="登录">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </c:when>
        <c:otherwise>
            <div style="margin-left: 50px"><h1>用户已登陆，请勿重复登录</h1></div>
            <div style="margin-left: 50px"><a href="/person/toIndex">返回首页</a></div>
        </c:otherwise>
    </c:choose>

</div>
<!--内容-->
<!--底部-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    ©&nbsp;2017&nbsp;flaskmovie.imooc.com&nbsp;京ICP备 13046642号-2
                </p>
            </div>
        </div>
    </div>
</footer>
<!--底部-->
<script src="${pageContext.request.contextPath}/resource/static/base/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/jquery.singlePageNav.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/wow.min.js"></script>
<script>
    $(document).ready(
        function () {
            $("#loginForm").on("submit", function () {
                var name = $("#input_contact").val();
                var pwd = $("#input_password").val();
                var role=$("#selectrole").val();
                var data = {
                    "personName": name,
                    "personPassword": pwd,
                    "personRole": role
                }
                $.ajax({
                    url: "/person/personLogin",
                    data: data,
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        alert(res.msg);
                        if (res.code == "200") {
                            window.location = "/film/index";
                        }
                    },
                    error: function (e1, e2, e3) {
                        console.log(e1);
                        console.log(e2);
                        console.log(e3);
                    }
                })
                return false;
            })
        }
    )
</script>
</body>
</html>
